<template>
  <!-- 只保留内容区 -->
  <div :class="styles['settings-container']">
    <h1 :class="styles['settings-title']">设置</h1>
    <div :class="styles['settings-card']">
      <div :class="styles['settings-row']">
        <span>通知提醒</span>
        <input type="checkbox" v-model="notify" />
      </div>
      <div :class="styles['settings-row']">
        <span>夜间模式</span>
        <input type="checkbox" v-model="darkMode" />
      </div>
      <div :class="styles['settings-row']">
        <span>语言</span>
        <select v-model="language">
          <option value="zh">简体中文</option>
          <option value="en">English</option>
        </select>
      </div>
      <div :class="styles['settings-row']">
        <button :class="styles['save-btn']" @click="saveSettings">保存设置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import styles from '@/styles/student/settings.module.css'

const notify = ref(true)
const darkMode = ref(false)
const language = ref('zh')

const saveSettings = () => {
  alert('设置已保存！')
}
</script>